layui.define(['jquery', 'element', 'layer'], function (e) {
	var $ = layui.jquery,
		layer = layui.layer;
	
	var page = {
		init: function(){
			page.event(); // 事件
			page.companyLine(); //从业单位
			page.mapPositioning(); // 定位地图
			page.migrateChart(); // 迁徙图
		},
		event: function() {
			// 切换筛选项
			$("body").on("click", ".filter-item-box .filter-item", function(e){
	    		$(this).addClass("current").siblings().removeClass("current");
	    	});
	    	
	    	// 图片文字提示
	    	$(".scenePicture-describe").on("click", function() {
	    		layer.tips('图片详情描述', '.scenePicture-describe', {
				  tips: [1, '#3595CC'],
				  time: 4000
				});
	    	});
	    	
		},
		companyLine: function(){
			var color = ['#e2e408','#fb4581','#36e3ef','#33fc50'];
			var legendData = ['建设单位','施工单位','监理单位','评估单位'];
			var xAxisData = ['二月', '四月', '六月', '八月', '十月', '十二月'];
			/* 随机数据 */
			var obj = [];
        	for (var j=0;j<4;j++) {
        		var att = [];
        		for (var i=0;i<6;i++) {
            		var tim = Math.ceil(Math.random()*200);
            		att.push(tim);
            	}
        		obj.push(att);
        	}
			var option = {
				textStyle: {
					color: "#fff"
				},
			    color: color,
			    tooltip : {
			        trigger: 'axis',//item
			        axisPointer: {
			            type: 'cross',
			            label: {
			                backgroundColor: '#6a7985'
			            }
			        }
			    },
			    legend: {
			    	top: 10,
			    	left: 30,
			    	textStyle: {
			    		color: "#fff"
			    	},
			        data: legendData
			    },
			    grid: {
			    	top: 80,
			    	height: 135
			    },
			    xAxis: {
			        type: 'category',
			        name: "月份",
			        nameTextStyle: {
			            color: "#fff"
			        },
			        boundaryGap: true, // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
			        axisLine: {
			        	lineStyle: {
			        		color: "#fff"
			        	}
			        },
			        axisTick: {
			        	show: false // 是否显示坐标轴刻度。
			        },
			        data: xAxisData
			    },
			    yAxis: {
			        name: "家",
			        nameTextStyle: {
			            color: "#fff"
			        },
			        axisLine: {
			        	lineStyle: {
			        		color: "#fff"
			        	}
			        },
			        axisTick: {
			        	show: false // 是否显示坐标轴刻度。
			        },
			        min: 0
			    },
			    series: [
			        {
			        	symbol: "none", // 标记的图形。[ default: 'emptyCircle' ]
			            name: "建设单位",
			            data: obj[0],
			            type: 'line',
			            /*label: { // 是否显示数量
			                normal: {
			                    show: true,
			                    position: 'top'
			                }
			            },*/
			            smooth: false // true: 曲线  false:直线
			        },{
			        	symbol: "none", // 标记的图形。[ default: 'emptyCircle' ]
			            name: '施工单位',
			            data: obj[1],
			            type: 'line',
			            stack: '总量',
			            /*label: { // 是否显示数量
			                normal: {
			                    show: true,
			                    position: 'top'
			                }
			            },*/
			            smooth: false
			        }
			        ,{
			        	symbol: "none", // 标记的图形。[ default: 'emptyCircle' ]
			            name: '监理单位',
			            data: obj[2],
			            type: 'line',
			            stack: '总量',
			            /*label: { // 是否显示数量
			                normal: {
			                    show: true,
			                    position: 'top'
			                }
			            },*/
			            smooth: false
			        }
			        ,{
			        	symbol: "none", // 标记的图形。[ default: 'emptyCircle' ]
			            name: '评估单位',
			            data: obj[3],
			            type: 'line',
			            stack: '总量',
			            /*label: { // 是否显示数量
			                normal: {
			                    show: true,
			                    position: 'top'
			                }
			            },*/
			            smooth: false
			        }
			    ]
			};
			var chart = echarts.init(document.getElementById('employmentUnit'));
			chart.setOption(option);
		},
		mapPositioning: function() {
			var china = '../static/json/china.json';
			var qiandongnan = '../static/json/guizhou/qiandongnan.json';
			$.get(qiandongnan, function(mapJson) {
				var mapName = "qiandongnan",
					name_title = "黔东南州民爆图",
					subname = '',
					nameColor = '#fff',
					name_fontFamily = '等线',
					subname_fontSize = 15,
					name_fontSize = 18;
				echarts.registerMap(mapName, mapJson);
				
				var data = [
				    {name: '黎平机场', value: 9},
				    {name: '凯里学院', value: 12},
				    {name: '西江千户苗寨', value: 12},
				    {name: '舞阳河', value: 12}
				];
				var geoCoordMap = {
					'凯里市': [107.97, 26.58],
					'黎平机场': [109.161125, 26.32655], // 黎平机场
				  	'凯里学院': [107.89861, 26.531537], // 凯里学院
				  	'西江千户苗寨': [108.179169, 26.499467], // 西江千户苗寨
				    '舞阳河': [108.328647, 27.0465], // 舞阳河
				    '天柱县': [109.178318, 26.929808] // 天柱县
				};
				
				// 定位
				var myChart = echarts.init(document.getElementById('city_map'));
				
				var max = 480,
				    min = 9; // todo 
				var maxSize4Pin = 100,
				    minSize4Pin = 20;
				
				var convertData = function (data) {
				    var res = [];
				    for (var i = 0; i < data.length; i++) {
				        var geoCoord = geoCoordMap[data[i].name];
				        if (geoCoord) {
				            res.push({
				                name: data[i].name,
				                value: geoCoord.concat(data[i].value)
				            });
				        }
				    }
				    return res;
				};
				
				option = {
				    //backgroundColor: '#404a59',
				    title: {
				        text: name_title,
				        subtext: subname,
				        top: "20px",
				        x: 'center',
				        textStyle: {
				            color: nameColor,
				            fontFamily: name_fontFamily,
				            fontSize: name_fontSize
				        },
				        subtextStyle:{
				            fontSize:subname_fontSize,
				            fontFamily:name_fontFamily
				        }
				    },
				    tooltip : {
				        trigger: 'item'
				    },
				    legend: {
				        orient: 'vertical',
				        y: 'bottom',
				        x:'right',
				        //data:['pm2.5'],
				        textStyle: {
				            color: '#fff'
				        }
				    },
				    geo: {
				        map: mapName,
				        label: {
				        	normal: {
			                    show: true,
			                    textStyle: {
			                        color: '#fff'
			                    }
			                },
				            emphasis: {
				                textStyle: {
			                        color: '#fff'
			                    }
				            }
				        },
				        roam: false,
				    	itemStyle: {
				    		normal: {
				                areaColor: '#323c48',
				                borderColor: '#111'
				            },
				            emphasis: {
				                areaColor: '#2a333d'
				            }
				    	}
				    },
				    series : [
				        {
				            name: 'pm2.5',
				            type: 'scatter',
				            coordinateSystem: 'geo',
				            data: convertData(data),
				            symbolSize: function (val) {
				                return val[2] / 10;
				            },
				            /*label: {
				                normal: {
				                    formatter: '{b}',
				                    position: 'right',
				                    show: true
				                },
				                emphasis: {
				                    show: true
				                }
				            },*/
				            itemStyle: {
				                normal: {
				                    color: '#ddb926'
				                }
				            }
				        },
				        {
				            type: 'map',
				            map: mapName,
				            geoIndex: 0,
				            aspectScale: 0.75, //长宽比
				            showLegendSymbol: false, // 存在legend时显示
				            /*label: {
				                normal: {
				                    show: true
				                },
				                emphasis: {
				                    show: false,
				                    textStyle: {
				                        color: '#fff'
				                    }
				                }
				            },*/
				            roam: true,
				            itemStyle: {
				                normal: {
				                    areaColor: '#031525',
				                    borderColor: '#3B5077',
				                },
				                emphasis: {
				                    areaColor: '#2B91B7'
				                }
				            },
				            animation: false,
				            data: data
				        },
				        /*{
				            name: '点',
				            type: 'scatter',
				            coordinateSystem: 'geo',
				            symbol: 'pin', //气泡
				            symbolSize: function(val) {
				                var a = (maxSize4Pin - minSize4Pin) / (max - min);
				                var b = minSize4Pin - a * min;
				                b = maxSize4Pin - a * max;
				                return a * val[2] + b;
				            },
				            label: {
				                normal: {
				                    show: true,
				                    textStyle: {
				                        color: '#fff',
				                        fontSize: 9,
				                    }
				                }
				            },
				            itemStyle: {
				                normal: {
				                    color: '#ff2727', //标志颜色
				                }
				            },
				            zlevel: 6,
				            data: convertData(data)
				        },*/
				        {
				            name: '位置',
				            type: 'effectScatter',
				            coordinateSystem: 'geo',
				            data: convertData(data.sort(function (a, b) {
				                return b.value - a.value;
				            }).slice(0, 6)), // 缩放 0 -6
				            symbolSize: function (val) {
				                return val[2] / 1;
				            }, // 点的大小
				            showEffectOn: 'render',
				            rippleEffect: {
				                brushType: 'stroke'
				            },
				            hoverAnimation: true,
				            /*label: {
				                normal: {
				                    formatter: '{b}',
				                    position: 'right',
				                    show: true
				                }
				            },*/
				            itemStyle: {
				                normal: {
				                    color: '#ff2727',
				                    shadowBlur: 10,
				                    shadowColor: '#333'
				                }
				            },
				            zlevel: 1
				        }
				    ]
				};
				myChart.setOption(option);
			});
		},
		migrateChart: function() {
			var china = '../static/json/china.json';
			var qiandongnan = '../static/json/guizhou/qiandongnan.json';
			$.get(qiandongnan, function(mapJson) {
				var mapName = "qiandongnan";
				echarts.registerMap(mapName, mapJson);
				var data = [
				    {name: '黎平机场', value: 9},
				    {name: '凯里学院', value: 12},
				    {name: '西江千户苗寨', value: 12},
				    {name: '舞阳河', value: 12}
				];
				// 经纬度
				var geoCoordMap = {
					'凯里市': [107.97, 26.58],
					'黎平机场': [109.161125, 26.32655], // 黎平机场
				  	'凯里学院': [107.89861, 26.531537], // 凯里学院
				  	'西江千户苗寨': [108.179169, 26.499467], // 西江千户苗寨
				    '舞阳河': [108.328647, 27.0465], // 舞阳河
				    '天柱县': [109.178318, 26.929808] // 天柱县
				};
				// 迁徙数据
				var migrateData = [
				    [{name:'凯里市'}, {name:'黎平机场',value:95}],
				    [{name:'凯里市'}, {name:'凯里学院',value:90}],
				    [{name:'凯里市'}, {name:'西江千户苗寨',value:80}],
				    [{name:'凯里市'}, {name:'舞阳河',value:70}],
				    [{name:'凯里市'}, {name:'天柱县',value:70}]
				];
				
				// 迁徙图
				var migrateMap =  echarts.init(document.getElementById('migrateMap'));
				var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
				
				var converTmigrateData = function(data) {
					var res = [];
					for(var i = 0; i < data.length; i++) {
						var dataItem = data[i];
						var fromCoord = geoCoordMap[dataItem[0].name];
						var toCoord = geoCoordMap[dataItem[1].name];
						if(fromCoord && toCoord) {
							res.push([{
								coord: fromCoord
							}, {
								coord: toCoord
							}]);
						}
					}
					return res;
				};
				
				var color = ['#a6c84c', '#ffa022', '#46bee9'];
				var series = [];
				[['凯里市', migrateData]].forEach(function(item, i) {
					series.push({
						name: item[0],
						type: 'lines',
						zlevel: 1,
						effect: {
							show: true,
							period: 6,
							trailLength: 0.7,
							color: '#fff',
							symbolSize: 3
						},
						lineStyle: {
							normal: {
								color: color[i],
								width: 0,
								curveness: 0.2
							}
						},
						data: converTmigrateData(item[1])
					}, {
						name: item[0],
						type: 'lines',
						zlevel: 2,
						effect: {
							show: true,
							period: 6,
							trailLength: 0,
							symbol: planePath,
							symbolSize: 15
						},
						lineStyle: {
							normal: {
								color: color[i],
								width: 1,
								opacity: 0.4,
								curveness: 0.2
							}
						},
						data: converTmigrateData(item[1])
					}, {
						name: item[0],
						type: 'effectScatter',
						coordinateSystem: 'geo',
						zlevel: 2,
						rippleEffect: {
							brushType: 'stroke'
						},
						label: {
							normal: {
								show: true,
								position: 'right',
								formatter: '{b}'
							}
						},
						symbolSize: function(val) {
							return val[2] / 8;
						},
						itemStyle: {
							normal: {
								color: color[i]
							}
						},
						data: item[1].map(function(dataItem) {
							return {
								name: dataItem[1].name,
								value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
							};
						})
					});
				});
				
				tmigrateOption = {
					backgroundColor: 'rgba(255, 255, 255, 0)',
					/*title: {
						text: '模拟迁徙',
						subtext: '数据纯属虚构',
						left: 'center',
						textStyle: {
							color: 'rgba(255, 255, 255, 0)'
						}
					},*/
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						top: 'bottom',
						left: 'right',
						//data: ['北京 Top10'],
						textStyle: {
							color: 'rgba(255, 255, 255, 0)'
						},
						selectedMode: 'single'
					},
					geo: {
						map: mapName,
						label: {
							emphasis: {
								show: false
							}
						},
						roam: false,
						itemStyle: {
							normal: {
								areaColor: 'rgba(255, 255, 255, 0)',
								borderColor: 'rgba(255, 255, 255, 0)'
							},
							emphasis: {
								areaColor: 'rgba(255, 255, 255, 0)'
							}
						}
					},
					series: series
				};
				// 迁徙图
				migrateMap.setOption(tmigrateOption);
			});
		}
	};
	
	$(function(){
		page.init(); // 执行代码
	});
	
	e("bigData", {});
});